<template>
	<view>
		<view class="content">
			<u-picker :show="show1" :columns="columns1" @confirm="confirm" title="选择分部工程" @close="()=>show1=false"
				@cancel="()=>show1=false" keyName="partName">
			</u-picker>
			<u-picker :show="show2" :columns="columns2" @confirm="confirm" title="选择子分部工程" @close="()=>show2=false"
				@cancel="()=>show2=false" keyName="partName">
			</u-picker>
			<u-picker :show="show3" :columns="columns3" @confirm="confirm" title="选择分项工程" @close="()=>show3=false"
				@cancel="()=>show3=false" keyName="partName">
			</u-picker>
			<u-picker :show="show4" :columns="columns4" @confirm="confirm" title="选择进度" @close="()=>show4=false"
				@cancel="()=>show4=false" keyName="partName">
			</u-picker>
			<view v-if="dynamicForm.items.length" class="dynamicForm">
				<u--form labelPosition="left" :model="dynamicForm" ref="refForm">
					<u-form-item v-for="(item, index) in dynamicForm.items" :key="item.key">
						<view class="add-zone">
							<view class="click-zone">
								<image src="/static/home_icons/delete.png" class="pix" @click.stop="removeCard(item)">
								</image>
								<image src="/static/home_icons/add.png" class="pix" @click.stop="addForm"></image>
							</view>
							<view class="add-form">
								<u-cell-group :border="false">
									<u-cell size="normal" title="分部工程" isLink :value="item.attributes.subproject"
										@click="showPicker(0,item)">
									</u-cell>
									<u-cell size="normal" title="子分部工程" :value="item.attributes.SubdivisionProject"
										isLink @click="showPicker(1,item)">
									</u-cell>
									<u-cell size="normal" title="分项工程" :value="item.attributes.partName" isLink
										@click="showPicker(2,item)">
									</u-cell>
									<u-cell size="normal" title="进度" :value="item.progressName" isLink
										@click="showPicker(3,item)">
									</u-cell>
									<u-cell size="normal" title="备注" :border="false" :value="item.input_num +'/200'">
									</u-cell>
									<view class="pixs">
										<textarea class="_textarea" maxlength="200" @input="monitorInput(item)"
											v-model="item.attributes.tips" placeholder="请填写备注，最多输入200个字" />
										<!-- <span class="numLimit">{{item.input_num}}/200</span> -->
									</view>
									<u-cell size="normal" title="现场情况" :border="false"></u-cell>
									<view class="pixs">
										<text style="font-size: 10rpx;">上传视频：</text>
										<u-upload accept="video" :fileList="item.videoList" @afterRead="afterRead1"
											:maxCount="1" :width="180" :height="180" @delete="deletePic1"
											:itemData="item" :maxDuration="30">
										</u-upload>
										<text style="font-size: 10rpx;">上传图片：</text>
										<u-upload :fileList="item.fileList" @afterRead="afterRead" name="pix"
											:maxCount="9" width="180rpx" height="188rpx" :previewFullImage="true"
											multiple @delete="deletePic" :itemData="item">
										</u-upload>
									</view>
								</u-cell-group>
							</view>
						</view>
					</u-form-item>
					<button type="default" class="btn" @click="goto()">下一页</button>
				</u--form>
			</view>
			<view v-else>
				<view class="add-zone">
					<view class="click-zone">
						<image src="/static/home_icons/delete.png" class="pix" @click.stop=""></image>
						<image src="/static/home_icons/add.png" class="pix" @click.stop="addForm()"></image>
					</view>
				</view>
				<u-empty text="暂无记录~" icon="/static/home_icons/nodata.png" marginTop="166rpx" width="200rpx"
					height="131rpx">
				</u-empty>
				<button type="default" class="btn" @click="goto()">下一页</button>
			</view>
		</view>
	</view>
</template>

<script>
	import _utils from "@/common/_utils.js"
	import $C from '@/common/config.js';
	import _file from '@/common/file.js'
	export default {
		props: {
			nextUrl: String,
			node: Object
		},
		name: "StepOne",
		data() {
			return {
				dynamicForm: {
					items: []
				},
				progressData: [],
				fileIds: [],
				flag: 0,
				formList: [],
				fileList: [],
				columns1: [],
				columns2: [],
				columns3: [],
				columns4: [],
				pickerTitle: '',
				showEmpty: true,
				show1: false,
				show2: false,
				show3: false,
				show4: false,
				partOne: [],
				partThree: [],
				partTwo: [],
				temp: 0
			};
		},
		created() {
			this.getProgressList()
			this.Init()
		},
		methods: {
			async Init() {
				let _para = {}
				_para.parentId = this.node.partId
				_para.estateId = this.node.estateId
				console.log("getpartone init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				if (_node) {
					this.partOne = _node
				} else {
					this.partOne = []
				}
				this.columns1 = [this.partOne]
				// console.log(this.columns)
			},
			async getPartTwo(id) {
				let _para = {}
				_para.parentId = id
				_para.estateId = this.node.estateId
				console.log("getpart two init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				console.log(_node)

				if (_node) {
					this.partTwo = _node
				} else {
					this.partTwo = []
				}
				this.columns2 = [this.partTwo]
			},
			async getPartThree(id) {
				let _para = {}
				_para.parentId = id
				_para.estateId = this.node.estateId
				console.log("getpart two init:")
				console.log(_para)
				//获取节点列表
				let _node = await _utils.getPartInfoByParentIdAndEstateId(_para)
				if (_node) {
					this.partThree = _node
				} else {
					this.partThree = []
				}
				this.columns3 = [this.partThree]
			},
			removeCard(data) {
				let index = this.dynamicForm.items.indexOf(data)
				if (index !== -1) {
					this.dynamicForm.items.splice(index, 1)
				}
			},
			addForm() {
				this.dynamicForm.items.push({
					key: Date.now(),
					createTime: uni.$u.timeFormat(false, 'yyyy-mm-dd hh:MM'),
					estateId: this.node.estateId,
					progressStatus: 1,
					partId: '',
					progressValue: '',
					progressName: '',
					fileList: [],
					videoList: [],
					flag: this.node.flag,
					attributes: {
						parentId: this.node.partId,
						tips: ''
					},
					input_num: 0
				})
			},
			monitorInput(item) {
				this.dynamicForm.items[this.temp].input_num = item.attributes.tips.length
			},
			formatData() {
				let cloneData = uni.$u.deepClone(this.dynamicForm.items)
				for (let i = 0; i < cloneData.length; i++) {
					let pixs = []
					for (let j = 0; j < cloneData[i].fileList.length; j++) {
						pixs.push(cloneData[i].fileList[j].urlId)
					}
					cloneData[i].images = pixs.toString()
					let video = []
					for (let j = 0; j < cloneData[i].videoList.length; j++) {
						video.push(cloneData[i].videoList[j].urlId)
					}
					cloneData[i].attributes.video = video.toString()
					uni.setStorageSync('partId', cloneData[i].partId)
				}
				this.$emit('saveData', cloneData)
				this.$emit('goToNext')
			},
			goto() {
				//数据校验
				let flag = true
				let _form_data = this.dynamicForm.items
				for (let i = 0; i < _form_data.length; i++) {
					let j = i + 1
					if (_form_data[i].partId == '') {
						uni.$showMsg('第' + j + '组尚未选择工程')
						flag = false
						break
					} else if (_form_data[i].progressValue == '') {

						uni.$showMsg('第' + j + '组尚未选择进度值')
						flag = false
						break
					} else if (_form_data[i].fileList == '') {
						uni.$showMsg('第' + j + '组尚未上传现场图片')
						flag = false
						break
					}
				}
				if (flag)
					this.formatData()
			},
			// 删除图片
			deletePic(event) {
				let i = this.dynamicForm.items.indexOf(event.itemData)
				this.dynamicForm.items[i].fileList.splice(event.index, 1)
				uni.$showMsg("删除图片成功")
			},
			deletePic1(event) {
				let i = this.dynamicForm.items.indexOf(event.itemData)
				this.dynamicForm.items[i].videoList.splice(event.index, 1)
				uni.$showMsg("删除视频成功")
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let index = this.dynamicForm.items.indexOf(event.itemData)
				let lists = [].concat(event.file)
				let fileListLen = this.dynamicForm.items[index].fileList.length
				lists.map((item) => {
					this.dynamicForm.items[index].fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.dynamicForm.items[index].fileList[fileListLen]
					this.dynamicForm.items[index].fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId
					}))
					fileListLen++
				}
			},
			// 新增s视频
			async afterRead1(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let index = this.dynamicForm.items.indexOf(event.itemData)
				let lists = [].concat(event.file)
				let fileListLen = this.dynamicForm.items[index].videoList.length
				lists.map((item) => {
					this.dynamicForm.items[index].videoList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await _file.uploadVideoFilePromise(lists[i].url)
					const temp = JSON.parse(result)
					let item = this.dynamicForm.items[index].videoList[fileListLen]
					this.dynamicForm.items[index].videoList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						urlId: temp.body.fileId,
						// url: 'https://app.aixinfang.vip' + '/file/download?fileId=' + temp.body.fileId
					}))
					fileListLen++
				}
			},
			confirm(item) {
				switch (this.flag) {
					case 0:
						this.dynamicForm.items[this.temp].attributes.subproject = item.value[0].partName
						this.dynamicForm.items[this.temp].partId = item.value[0].partId
						// this.dynamicForm.items[this.temp].partName = item.value[0].partName
						this.getPartTwo(item.value[0].partId)
						this.show1 = false
						break;
					case 1:
						this.dynamicForm.items[this.temp].attributes.SubdivisionProject = item.value[0].partName
						this.dynamicForm.items[this.temp].partId = item.value[0].partId
						// this.dynamicForm.items[this.temp].partName = item.value[0].partName
						this.getPartThree(item.value[0].partId)
						this.show2 = false
						break;
					case 2:
						this.dynamicForm.items[this.temp].partId = item.value[0].partId
						this.dynamicForm.items[this.temp].attributes.partName = item.value[0].partName
						this.show3 = false
						break;
					case 3:
						this.dynamicForm.items[this.temp].progressValue = item.value[0].value
						this.dynamicForm.items[this.temp].progressName = item.value[0].partName
						this.show4 = false
						break;
				}
			},
			//获取进度列表
			getProgressList() {
				this.progressData = _utils.progressData()
			},
			showPicker(item, data) {
				let index = this.dynamicForm.items.indexOf(data)
				this.temp = index
				this.flag = item
				switch (this.flag) {
					case 0:
						this.columns1 = [this.partOne]
						this.show1 = true
						break;
					case 1:
						if (this.dynamicForm.items[index].attributes.subproject) {
							this.columns2 = [this.partTwo]
							this.show2 = true
						} else {
							uni.$showMsg('请先选择分部工程')
							return
						}
						break;
					case 2:
						if (this.dynamicForm.items[index].attributes.subproject) {
							this.columns3 = [this.partThree]
							this.show3 = true
						} else {
							uni.$showMsg('请先选择子分部工程')
							return
						}
						break;
					case 3:
						this.columns4 = [this.progressData]
						this.show4 = true
						break;
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 30rpx 58rpx 30rpx;
		display: flex;
		flex-direction: column;

		.dynamicForm {
			display: block;

			.add-zone {
				width: 100%;
			}
		}
	}

	.add-zone {
		padding: 20rpx;
		border: 1rpx solid #efefef;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.add-form {

		// display: flex;
		// flex-direction: column;
		// display: block;
		.pixs {
			padding: 20rpx;

		}
	}

	.click-zone {
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.pix {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.btn {
		margin-top: 60rpx;
		width: 560rpx;
		background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 44rpx;
		color: #FFFFFF;
	}

	._textarea {
		// width: 620rpx;
		height: 160rpx;
		background: #F5F5F5;
		border-radius: 10rpx;
	}

	.numLimit {
		position: relative;
		// top: 0rpx;
		// right: -530rpx;

	}
</style>
